<style>
.about {
  width: 100%;
  height: 700px;
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-image: linear-gradient(to right, #005aa7, #fffde4);
}
.boxs {
  z-index: 1;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ant-btn > i {
  margin-right: 10px;
}
</style>
<template>
  <div class="about">
    <div class="boxs">
      <h1>木鱼全球·畅聊</h1>
    </div>
    <div class="box">
      <a-form-model layout="inline">
        <a-form-model-item>
          <a-input placeholder="请您输入用户名"  v-model="username" @keyup.enter="enterSearch">
            <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="dashed" ghost @click="handleEnterBtnClick"><i class="iconfont icon-SEND"></i>进入聊天室</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
    };
  },
  mounted() {
    const username = localStorage.getItem("username");
    if (username) {
      this.$router.push("/");
      return;
    }
  },
  methods: {
    //进入聊天室回车事件
    enterSearch() {
      document.onkeydown = (e) => {
        if (e.keyCode === 13) {
          if (username.length < 3) {
            this.$message.warning("用户名不能小于3位", 1);
            return;
          } else {
            this.handleEnterBtnClick();
          }
        }
      };
    },
    handleEnterBtnClick() {
      const username = this.username.trim();
      if (username.length < 3) {
        this.$message.warning("用户名不能小于3位", 1);
        return;
      }
      localStorage.setItem("username", username);
      this.$router.push("/");
    },
  },
};
</script>
